<template id="tabsTry">
  <tabs></tabs>
</template>

<script>
  // import navBar from '@/components/page/navBar'
  // import teamTable from '@/components/page/rescueTeamPage'
  // import mapPage from '@/components/page/mapPage'

  var tabs={
    template:`<el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="区域应急管理" name="first" class="el-tab-pane">
        <el-container>
          <el-aside width="200px">
            <navBar></navBar>
          </el-aside>
          <el-main style="height: 100%;padding: 0">
            <teamTable></teamTable>
          </el-main>
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="应急指挥调度" name="second" class="el-tab-pane">
        <el-container>
          <el-aside width="200px">
            <navBar></navBar>
          </el-aside>
          <el-main style="height: 100%">
            <mapPage></mapPage>
          </el-main>
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="系统配置管理" name="third" class="el-tab-pane">
        <el-container>
          <el-aside width="200px">
            <navBar></navBar>
          </el-aside>
          <el-main style="height: 100%">
            <mapPage></mapPage>
          </el-main>
        </el-container>
      </el-tab-pane>
    </el-tabs>`
  };
  const tabsTry = new Vue({
    el: '#tabsTry',
    components:{
      'tabs':tabs,
      // "navBar":navBar,
      // teamTable,
      // mapPage
    },
    data() {
      return {
        activeName: 'first',
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
        if (event.explicitOriginalTarget.data === '应急指挥调度') {
          console.log(8);

        } else if (event.explicitOriginalTarget.data === '系统配置管理') {

        } else {

        }
      }
    },

  });



  // export default {
  //   name: "tabsTry",
  //   components: {
  //     navBar,
  //     teamTable,
  //     mapPage
  //   },
  //   data() {
  //     return {
  //       activeName: 'first',
  //     };
  //   },
  //   mounted() {
  //
  //   },
  //   methods: {
  //     handleClick(tab, event) {
  //       console.log(tab, event);
  //       if(event.explicitOriginalTarget.data==='应急指挥调度'){
  //         console.log(8);
  //
  //       }else if(event.explicitOriginalTarget.data==='系统配置管理'){
  //
  //       }else {
  //
  //       }
  //     }
  //   }
  // }
</script>

<style>
  .el-tab-pane:after {
    content: '';
    clear: both;
  }
  .tabs{
    padding: 0 20px;
  }
</style>
